<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        table,
        td,
        th {
            border: 1px solid;
            border-collapse: collapse;
            text-align: center;
        }

        table {
            margin: 200px auto;
        }

        td,
        th {
            width: 150px;
            height: 30px;
            padding: 10px;
        }

        table input[type="text"] {
            width: 140px;
            display: none;
        }

        table tbody tr td a {
            text-decoration: none;
            margin: 0 5px;
        }
        table tbody tr td .delBtn{
            color: red;
        }

        table tbody tr td .editBtn,
        table tbody tr td .delBtn {
            display: inline-block;
        }

        table tbody tr td .okBtn,
        table tbody tr td .cancelBtn {
            display: none;
        }

        table tbody .edit td .editBtn,
        table tbody .edit td .delBtn,
        table tbody .edit td span {
            display: none;
        }

        table tbody .edit td .okBtn,
        table tbody .edit td .cancelBtn,
        table tbody .edit td input[type="text"] {
            display: inline-block;
        }

        form {
            width: 300px;
            height: 300px;
            box-shadow: 0px 0px 5px #000;
            background: #fff;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            display: none;
        }

        form p {
            text-align: center;
            margin: 40px 0;
        }

        form p input[type="button"] {
            margin: 0 20px;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" class="allCheck">全选/取消全选</th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>编辑</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td><span>衣服</span><input type="text"></td>
                <td><span>100</span><input type="text"></td>
                <td><span>2</span><input type="text"></td>
                <td><a href="#" class="editBtn">编辑</a><a href="#" class="delBtn">删除</a><a href="#"
                        class="okBtn">确定</a><a href="#" class="cancelBtn">取消</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td><span>裤子</span><input type="text"></td>
                <td><span>100</span><input type="text"></td>
                <td><span>1</span><input type="text"></td>
                <td><a href="#" class="editBtn">编辑</a><a href="#" class="delBtn">删除</a><a href="#"
                        class="okBtn">确定</a><a href="#" class="cancelBtn">取消</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td><span>帽子</span><input type="text"></td>
                <td><span>50</span><input type="text"></td>
                <td><span>2</span><input type="text"></td>
                <td><a href="#" class="editBtn">编辑</a><a href="#" class="delBtn">删除</a><a href="#"
                        class="okBtn">确定</a><a href="#" class="cancelBtn">取消</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td><span>鞋子</span><input type="text"></td>
                <td><span>66</span><input type="text"></td>
                <td><span>3</span><input type="text"></td>
                <td><a href="#" class="editBtn">编辑</a><a href="#" class="delBtn">删除</a><a href="#"
                        class="okBtn">确定</a><a href="#" class="cancelBtn">取消</a></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5"><a href="#" class="addBtn">添加新商品</a></td>
            </tr>
            <tr>
                <td colspan="5">总价 ：￥<b id="money">0</b></td>
            </tr>
        </tfoot>
    </table>
    <form action="">
        <p>
            <label for="name">名称：</label><input type="text" id="name">
        </p>
        <p>
            <label for="price">单价：</label><input type="text" id="price">
        </p>
        <p>
            <label for="num">数量：</label><input type="text" id="num">
        </p>
        <p>
            <input type="button" value="添加" id="add">
            <input type="button" value="取消" id="cancel">
        </p>
    </form>
    <script>
        var table = document.querySelector("table");
        var checks = table.querySelectorAll(".check");
        var allCheck = table.querySelector(".allCheck");
        var form = document.querySelector("form");
        var money = document.querySelector("#money");
        var moneySum = 0;
        var checkNum = 0;
        table.onclick = e => {
            e = e || event;
            var target = e.target || e.srcElement;
            switch (target.className) {
                case 'allCheck':
                    Array.from(checks).forEach(check => {
                        check.checked = target.checked;
                    });
                    checkNum = target.checked ? checks.length : 0;
                    break;
                case 'check':
                    target.checked ? checkNum++ : checkNum--;
                    allCheck.checked = checkNum === checks.length;
                    break;
                case 'editBtn':
                    var tr = target.parentNode.parentNode;
                    spans = tr.querySelectorAll('td span');
                    Array.from(spans).forEach(span => {
                        span.nextElementSibling.value = span.innerHTML;
                    })
                    tr.classList.add('edit');
                    break;
                case 'delBtn':
                    var tr = target.parentNode.parentNode;
                    tr.remove();
                    checks = table.querySelectorAll(".check");
                    break;
                case 'okBtn':
                    var tr = target.parentNode.parentNode;
                    spans = tr.querySelectorAll('td span');
                    Array.from(spans).forEach(span => {
                        span.innerHTML = span.nextElementSibling.value;
                    })
                    tr.classList.remove('edit');
                    break;
                case 'cancelBtn':
                    var tr = target.parentNode.parentNode;
                    tr.classList.remove('edit');
                    break;
                case 'addBtn':
                    form.style.display = "block";
                    break;
            }
            moneySum = 0;
            Array.from(checks).forEach(check => {
                if (check.checked) {
                    var tr = check.parentNode.parentNode;
                    moneySum += tr.children[2].children[0].innerHTML * tr.children[3].children[0].innerHTML;
                }
            });
            money.innerHTML = moneySum;
        }
        form.onclick = e => {
            e = e || event;
            var target = e.target || e.srcElement;
            switch (target.id) {
                case 'add':
                    form.style.display = "none";
                    var name = form.querySelector("#name").value;
                    var price = form.querySelector("#price").value;
                    var num = form.querySelector("#num").value;
                    var tr = document.createElement('tr');
                    table.querySelector('tbody').appendChild(tr);
                    tr.innerHTML =
                        `<td><input type="checkbox" class="check"></td>
                                    <td><span>${name}</span><input type="text"></td>
                                    <td><span>${price}</span><input type="text"></td>
                                    <td><span>${num}</span><input type="text"></td>
                                    <td><a href="#" class="editBtn">编辑</a><a href="#" class="delBtn">删除</a><a href="#"class="okBtn">确定</a><a href="#" class="cancelBtn">取消</a></td>`
                    checks = table.querySelectorAll(".check");
                    allCheck.checked = false;
                    break;
                case 'cancel':
                    form.style.display = "none";
                    break;
            }
        }
    </script>
</body>

</html>